<template>
    <div>
        <div class="classify_top">
            <img src="../../assets/img/classify/main_warm.jpg" class="img_warm" alt="">
            <img src="../../assets/img/classify/main_snow.jpg" class="img_snow" ref="img_snow" alt="">
        </div>

        <div class="ui fluid container classify_panel">
            <div class="ui grid">
                <div class="one wide column"></div>
                <div class="nine wide column" style="margin-left: 0.3vw;">
                    <div class="sort_panel">
                        <div style="height: 21px;width: 21px;border:4px solid skyblue;border-radius: 20px;white-space: nowrap">
                            <div style="border-left:3px solid skyblue;margin-top: 16px;margin-left: 5px;padding-bottom: 20px">
                                <p style="margin-left: 20px;float: left; margin-top: -23px;font-size: 25px">
                                    <strong>标签: {{sortName}}</strong><br>
                                </p>
                                <div style="height:30px"></div>
                            </div>
                        </div>
                    </div>

                    <!--  年份圆圈  -->
                    <template v-if="!articleList.length">
                        <div style="background-color: white;margin:100px;text-align: center;padding: 20px">
                            空空如也~
                        </div>
                    </template>
                    <div v-for="(data,index) in years" :key="index" style="margin-left: 29px;">
                        <div class="year_circle"></div>
                        <div style="border-left: 3px solid skyblue;margin-left: 5px;margin-top: 0px;">
                            <div style="margin-left: 30px;padding-bottom: 20px;display: inline-block">
                                <!--  年份  -->
                                <p style="margin-left: -15px;margin-top: -20px;font-size: 23px">
                                    {{data}}</p>
                                <!--  列表Card   -->
                                <template v-for="(list,index) in articleList">
                                    <div v-if="list.year==data" :key="index">
                                        <br>
                                        <div class="classify_card">
                                            <img style="height: 86px;width: 134px;vertical-align: middle"
                                                 :src="list.img">
                                            <div class="classify_card_text">
                                                <router-link :to="{ name: 'article', params: { articleId: list.id }}">
                                                    <p style="font-size: 16px">
                                                        <strong>{{list.title}}</strong>
                                                    </p>
                                                </router-link>

                                                <div style="margin-top: 17px">
                                                    <template v-for="(label,index) in  list.label">
                                                        <div class="ui label" :key="index">
                                                            <router-link class="route_link_active"
                                                                         :to="{ name: 'classify', params: { sortName: label,labelId:index }}">
                                                                <i class="tag icon"></i> {{label}}
                                                            </router-link>
                                                        </div>
                                                    </template>

                                                    <div class="ui right labeled mini button" style="margin-left: 4px">
                                                        <div class="ui icon teal mini button">
                                                            <i class="calendar check icon"></i>
                                                        </div>
                                                        <a class="ui basic label">
                                                            {{list.created_at}}
                                                        </a>

                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div style="height:40px"></div>
                        </div>
                    </div>


                </div>
                <!----------------------------- Sort END-------------------------------->


                <SideBar style="margin-top: 40px">
                    <template v-slot:label>
                        <div class="ui special cards">
                            <div class="card">
                                <GetLabel></GetLabel>
                            </div>
                        </div>
                    </template>
                    <template v-slot:friend_link>
                        <FriendLinkForBar></FriendLinkForBar>
                    </template>

                </SideBar>


                <div class="two wide column"></div>
            </div>
        </div>
        <FooterForMain class="foot_classify"></FooterForMain>
    </div>
</template>

<script>

    import SideBar from "../../pages/sideBar/SideBar.vue";
    import GetLabel from "../../components/GetLabel";
    import FriendLinkForBar from "../../components/FriendLinkForBar";
    import FooterForMain from "../../components/FooterForMain";

    export default {
        props: ['sortName', 'labelId'],
        data() {
            return {
                years: [],
                articleList: [],
            }
        },
        components: {
            SideBar,
            GetLabel,
            FriendLinkForBar,
            FooterForMain,
        },
        mounted() {
            window.addEventListener('mousemove', this.handleMouseMove)
        },
        computed: {},
        created() {
            this.getClassify();
        },
        watch: {
            $route(to, from) {
                this.getClassify()
            }
        },

        methods: {
            getClassify() {
                this.articleList = [];

                let labelId = this.labelId;

                if (!labelId) {
                    labelId = 0;
                }

                this.req({
                    url: 'classify',
                    method: 'post',
                    data: {label_id: labelId}
                })
                    .then(res => {
                        document.title = '标签' + this.sortName + '&Rocco';

                        this.articleList = res.data.lists;
                        this.years = res.data.years;

                        console.log(res.data.years);
                        console.log('-------------------');

                        console.log(this.years);
                    })
                    .catch(error => {
                        this.$store.commit('negate');
                        console.log('getClassify() error' + error);
                    });

                this.$store.commit('negate');
            },

            handleMouseMove(e) {
                let clientWidth = document.body.clientWidth;

                let aa = (e.screenX / clientWidth).toFixed(1);
                $(".img_snow").animate({opacity: aa}, 1);

            },

        },
        filters: {
            // capitalize: function (value) {
            //     if (value) {
            //         return /\d{4}-\d{1,2}-\d{1,2} /g.exec(value)[0]; //将日期过滤，只输出年月日
            //     }
            // },

        },
        destroyed() {
            window.removeEventListener('mousemove', this.handleMouseMove, true)
        },


    }
</script>

<style scoped>

    .classify_panel {
        background-color: lemonchiffon;
        padding-bottom: 100px;
    }

    .classify_top {
        width: 110%;
        height: 9.2vw;
    }

    .img_warm {
        width: 110%;
        height: 9.2vw;
        position: absolute;
        top: 0;
        left: 0;
        background: skyblue;
    }

    .img_snow {
        width: 110%;
        height: 9.2vw;
        position: absolute;
        top: 0;
        left: 0;
        background: skyblue;
    }


    .sort_panel {
        margin-top: 1vw;
        border-bottom: 2px dashed;
        margin-bottom: 20px;
        padding: 25px;
    }

    .year_circle {
        width: 11px;
        height: 11px;
        border: 2px solid orange;
        border-radius: 20px;
        margin-left: 1px;
    }

    .classify_card {

        max-width: 45vw;
        margin-bottom: 40px;
        display: inline-block;
        /*cursor: pointer*/
    }

    .classify_card_text {
        padding: 6px;
        display: inline-block;
        vertical-align: top;
        border: 3px solid cornflowerblue
    }

    .classify_card_text:hover {
        border: 3px solid skyblue;
    }

    .route_link_active {

        font-size: larger;
        color: black !important;
        opacity: .6 !important;
    }

    .route_link_active:hover {
        opacity: .8 !important;
    }

    .foot_classify {
        margin-top: -40px;
    }
</style>
